<template>
  <div class="login_page">
    <div class="w1200 login_wrapper">
      <div class="head">
        <img
          src="@/assets/images/nav/logo@2x.png"
          class="img"
          alt=""
          @click="goHome"
        />
      </div>

      <div class="login_content">
        <div class="login_box">
          <h2 class="h2">用户登录</h2>

          <div class="menus_box">
            <div
              class="menu_cell"
              :class="menuActive == item.id ? 'menu_active' : ''"
              v-for="(item, index) in menus"
              :key="index"
              @click="menuEvent(item)"
            >
              {{ item.name }}
            </div>
          </div>

          <el-form ref="form" :model="form" :rules="formRules" class="el_form">
            <el-form-item label="" class="el_form_item" prop="account">
              <el-input
                v-model="form.account"
                class="el_input"
                maxlength="11"
                placeholder="请输入手机号"
              />
            </el-form-item>
            <el-form-item
              label=""
              class="el_form_item"
              prop="code"
              v-if="menuActive == 1"
            >
              <el-input
                v-model="form.code"
                class="el_input"
                maxlength="6"
                placeholder="请输入验证码"
              >
                <template slot="suffix">
                  <button
                    class="code_btn"
                    :disabled="time < 60 || !form.account"
                    v-text="time < 60 ? time + 's后获取' : '发送验证码'"
                    @click.prevent="sendCode"
                  ></button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="" class="el_form_item" prop="code" v-else>
              <el-input
                type="password"
                v-model="form.code"
                class="el_input"
                placeholder="请输入密码"
              />
            </el-form-item>
            <el-form-item
              label=""
              class="el_form_item tips_item"
              v-if="menuActive == 1"
            >
              <span class="tips"><i>*</i>未注册过的手机号将自动创建账号</span>
            </el-form-item>
            <el-form-item label="" class="">
              <el-button
                type="primary"
                class="submit_btn"
                @click.prevent="loginEvent"
                >登录</el-button
              >
            </el-form-item>
            <div>
              <el-checkbox class="el_checkbox" v-model="checked">
                <div class="contract_box">
                  登录/注册代表你同意<nuxt-link
                    to="/contract?type=1"
                    class="a_link"
                    >《哩哩用户条款》</nuxt-link
                  ><nuxt-link to="/contract?type=2" class="a_link"
                    >《哩哩隐私协议》</nuxt-link
                  >
                </div>
              </el-checkbox>
            </div>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 页脚 开始 -->
    <div class="bottom_footer">
      <Footer />
    </div>
    <!-- 页脚 end -->
  </div>
</template>
<script>
import Footer from "@/components/footer/index.vue";
import { Form, FormItem, Input, Checkbox } from "element-ui";
import {
  PLATFORM_TYPE,
  LOGIN_BY_PASSWORD,
  GET_MESSAGE_CODE,
} from "@/http/interface";
import { deepClone, showToast, checkPhone } from "@/utils/utils";
import { PHONE_VALIDATOR } from "@/utils/validator";
export default {
  components: {
    [Form.name]: Form,
    [FormItem.name]: FormItem,
    [Input.name]: Input,
    [Checkbox.name]: Checkbox,
    Footer,
  },
  data() {
    return {
      form: {},
      menus: [
        { name: "手机号登录", id: 1 },
        { name: "密码登录", id: 2 },
      ],
      menuActive: 1,
      checked: true,
      time: 60,
      timeInterval: "",
      formRules: {
        account: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: PHONE_VALIDATOR, trigger: "blur" },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 菜单点击事件
    menuEvent(row) {
      let code = [{ required: true, message: "请输入验证码", trigger: "blur" }];
      if (row.id == 2) {
        code = [{ required: true, message: "请输入密码", trigger: "blur" }];
      }
      this.$set(this.formRules, "code", code);
      this.$set(this.form, "code", "");
      this.menuActive = row.id;
      this.$refs.form.clearValidate();
    },

    // 勾选用户协议
    chooseAgreement() {
      this.checked = !this.checked;
    },

    // 获取短信验证码
    async sendCode() {
      let _this = this;
      let o = this.form;
      let time = this.time;
      if (!checkPhone(o.account)) {
        // showToast({
        //     message: '手机号码格式不正确'
        // })
        return false;
      }
      let timeInterval = setInterval(function () {
        if (time <= 0) {
          clearInterval(timeInterval);
          _this.time = 60;
          return false;
        }
        time--;
        _this.time = time;
      }, 1000);
      let res = await this.$axios.get(GET_MESSAGE_CODE, {
        params: { mobile: o.account },
      });
      if (res.code == 200) {
        showToast({
          message: "发送成功",
          type: "success",
        });
      }
    },

    // 获取参数
    getParams() {
      let o = deepClone(this.form);
      let params = {};
      params.account = o.account;
      params.code = o.code;
      params.loginType = this.menuActive;
      params.platform = PLATFORM_TYPE;
      return params;
    },

    // 登录
    loginEvent() {
      let _this = this;
      if (!_this.checked) {
        showToast({
          message: "请阅读并同意用户协议",
          type:'error'
        });
        return false;
      }
      _this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }

        let params = _this.getParams();
        _this.$axios.post(LOGIN_BY_PASSWORD, params).then((res) => {
          if (res.code == 200) {
            showToast({
              message: "登录成功",
              type: "success",
            });
            let obj = res.data || {};
            _this.$cookies.set("token", obj.token);
            _this.$cookies.set("user", obj.user);
            _this.goHome();
          }
        });
      });
    },

    // 返回首页
    goHome() {
      this.$router.push({
        path: "/home",
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/login/index.less";
</style>